<template>
	<view class="fl-s-s">
		<text style="font-size: 44rpx; color: #000000; margin-left: 32rpx;" class="fm-ali">在线充值</text>
		<view class="w-1 relative m-t-30 fl-s-s" style="height: 308rpx; padding: 64rpx 0 56rpx 64rpx">
			<image src="/static/images/user/recharge_bg.png" class="w-1 absolute-0" style="height: 308rpx;"></image>
			<text class="fs-26 c-ff fm-ali">余额</text>
			<view class="fr-s-e c-ff fm-ali" style="align-items: baseline;">
				<text class="fs-36">￥</text>
				<text class="m-t-10" style="font-size: 66rpx;">{{nowMoney}}</text>
			</view>	
		</view>
		<view class="ali-box w-1 fl-s-s p-r-30">
			<text class="ali-title">充值金额</text>
			<input v-model="money" class="my-input w-1" type="digit" placeholder="点击输入">
		</view>
		<view class="tx-box fl-s-s">
			<text class="fs-32 fm-ali" style="color: #000000;">充值方式</text>
			<scroll-view scroll-x style="margin-top: 36rpx; white-space: nowrap;">
				<view @click="curType = index" :class="[index==curType?'item-act':'type-item','fr-c','relative']" v-for="(item,index) in types" :key="index">
					<image v-if="index==curType" src="/static/images/user/choosed_icon.png" style="width: 42rpx; height: 42rpx; position: absolute; left: 0; top: 0;" ></image>
					<image :src="item.img" style="width: 48rpx; height: 48rpx;"></image>
					<text class="fs-28 m-l-10">{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 提交按钮 -->
		<view class="iphonex fr-c" style="background: #FFFFFF;">
			<view class="fr-c sub-btn" @click="subInfo">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				types:[
					
					{
						name:'微信',
						img:'/static/images/user/we_icon.png'
					},
					{
						name:'支付宝',
						img:'/static/images/user/ali_icon.png'
					}
					// ,{
					// 	name:'银行卡',
					// 	img:'/static/images/user/card_icon.png'
					// },
				],
				curType:0,
				nowMoney:0,
				money:''
			}
		},
		onLoad() {
			this.nowMoney = uni.getStorageSync('money') || 0
		},
		methods: {
			subInfo(){
				if(!this.money) return this.$u.toast('请输入充值金额');
				this.$post({
					url:'/appuser/addBalance',
					data:{
						access_token:uni.getStorageSync('access_token'),
						money:this.money,
						type:this.curType/1+1
					}
				}).then(res=>{
					const pays = ['wxpay','alipay']
					this.pay(pays[this.curType],res.data)
				})
			},
			pay(provider,orderInfo){
				// provider "wxpay"和'alipay'  orderInfo 微信对象 支付宝字符串
				uni.requestPayment({
					provider,
					orderInfo,
					success: () => {
						uni.showToast({
							title: '充值成功',
							mask: true
						})
					},
					fail: (e) => {
						console.log(e)
						uni.showToast({
							icon:'error',
							title: '支付失败',
							mask: true
						})
					}
				})
			},
			wePay(){
				uni.requestPayment({
					"provider": "wxpay",
					orderInfo:result.data,
					success: () => {
						uni.showToast({
							title: '充值成功',
							mask: true
						})
					},
					fail: (e) => {
						console.log(e)
						uni.showToast({
							icon:'error',
							title: '支付失败',
							mask: true
						})
					}
				})
			},
			aliPay(){
				uni.requestPayment({
				    provider: 'alipay',
				    orderInfo: result.orderStr, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				    success: ()=> {
				        uni.showToast({
				        	title: '充值成功',
				        	mask: true
				        })
				    },
				    fail: (err)=> {
				        console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									icon:'error',
									title: '支付失败',
									mask: true
								})
				    }
				});
			}
		}
	}
</script>

<style scoped>
	page{
		padding-bottom: 180rpx;
	}
	.ali-title{
		font-size: 32rpx;
		font-family: Alibaba;
		color: #000000;
	}
	.my-input{
		height: 104rpx;
		background: #F4F4F4;
		border-radius: 8rpx;
		padding: 0 32rpx;
		margin-top: 36rpx;
	}
	.tx-box{
		padding-left: 32rpx;
		margin-top: 62rpx;
	}
	
	.type-item{
		width: 256rpx;
		height: 104rpx;
		display: inline-flex;
		margin-right: 26rpx;
		background: #F4F4F4;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: Alibaba;
		color: #666666;
	}
	
	
	.item-act{
		width: 256rpx;
		height: 104rpx;
		display: inline-flex;
		background: rgba(250, 54, 10, 0.08);
		border-radius: 8rpx;
		border: 2rpx solid #FA360A;
		border-radius: 8rpx;
		font-family: Alibaba;
		color: #333333;
		margin-right: 26rpx;
		font-size: 28rpx;
	}
	
	.sub-btn{
		width: 686rpx;
		height: 100rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58);
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}
</style>
